import { Steps, Typography } from 'antd';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import SourceCode from '@/components/SourceCode';

import staticText from './constant';
import styles from './index.module.scss';

const { Text, Paragraph, Title, Link } = Typography;

const Instructions = () => {
  const { t } = useTranslation();
  const [current, setCurrent] = useState(0);
  const {
    clone,
    cdFront,
    cdBack,
    nodeJS,
    install,
    dev,
    packageJSON,
    proxy,
    databaseConfCode,
    proxyConfCode,
    troubleFirst,
    troubleSecond,
    troubleThird,
    createDBSQL,
  } = staticText;

  const items = [
    {
      key: 'installationTitle',
      title: t('installationTitle'),
      content: (
        <>
          <Title level={3} italic>
            {t('downloadTitle')}
          </Title>
          <Paragraph>{t('downloadContent')}</Paragraph>
          <Paragraph>
            <Text code copyable>
              {clone}
            </Text>
          </Paragraph>
          <Title level={3} italic>
            {t('installationTitle')}
          </Title>
          <Paragraph>
            {t('installationFirst')}
            <Link href="https://nodejs.org/en/" target="_blank">
              {nodeJS}
            </Link>
          </Paragraph>
          <Title level={4} italic>
            {t('frontendInstallation')}
          </Title>
          <Paragraph>
            1. {t('frontendFirst')}
            <br />
            <Text code copyable>
              {cdFront}
            </Text>
          </Paragraph>
          <Paragraph>
            2. {t('frontendSecond')}
            <br />
            <Text code copyable>
              {install}
            </Text>
          </Paragraph>
          <Paragraph>
            3. {t('frontendThird')}: <Text underline>{packageJSON}</Text>
            <br />
            <Text code copyable>
              {proxy}
            </Text>
          </Paragraph>
          <Paragraph>
            4. {t('frontendFinal')}
            <br />
            <Text code copyable>
              {dev}
            </Text>
          </Paragraph>
          <Title level={4} italic>
            {t('backendInstallation')}
          </Title>
          <Paragraph>
            1. {t('backendFirst')}
            <br />
            <Text code copyable>
              {cdBack}
            </Text>
          </Paragraph>
          <Paragraph>
            2. {t('backendSecond')}
            <br />
            <Text code copyable>
              {install}
            </Text>
          </Paragraph>
          <Paragraph>
            3. {t('backendThird')}
            <br />
          </Paragraph>
          <Paragraph>
            4. {t('backendFinal')}
            <br />
            <Text code copyable>
              {dev}
            </Text>
          </Paragraph>
        </>
      ),
    },
    {
      key: 'configuration',
      title: t('configuration'),
      content: (
        <>
          <Title level={3} italic>
            {t('configuration')}
          </Title>
          <Title level={4} italic>
            {t('databaseConf')}
          </Title>
          <SourceCode language="javascript" code={databaseConfCode} />
          <Title level={4} italic>
            {t('proxyConf')}
          </Title>
          <SourceCode language="javascript" code={proxyConfCode} />
        </>
      ),
    },
    {
      key: 'troubleshooting',
      title: t('troubleshooting'),
      content: (
        <>
          <Title level={3} italic>
            {t('troubleshooting')}
          </Title>
          <Title level={4}>{troubleFirst}</Title>
          <Text>{t('troubleFirstSolve')}</Text>
          <Title level={4}>{troubleSecond}</Title>
          <Text>{t('troubleSecondSolve')}</Text>
          <Title level={4}>{troubleThird}</Title>
          <Text>
            {t('troubleThirdSolve')}
            <Text code copyable>
              {createDBSQL}
            </Text>
          </Text>
        </>
      ),
    },
  ];

  const onChange = (value: number) => {
    setCurrent(value);
  };

  return (
    <Typography className={styles.instructions}>
      <Steps current={current} items={items} onChange={onChange} />
      <div className="instructionsContent">
        {items[current].content}
      </div>
    </Typography>
  );
};

export default memo(Instructions);
